<template>
  <view class="cost-adjustment-record-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="费用调整查询" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 本机号码 -->
      <view class="phone-info">
        <text class="phone-number">本机号码:{{ phoneNumber }}</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state">
        <view class="empty-box">
          <view class="empty-icon-wrapper">
            <image class="empty-icon" src="/static/images/bill.png" mode="aspectFit" />
          </view>
        </view>
      </view>
      
      <!-- 月份选择按钮 -->
      <view class="month-selector">
        <view 
          class="month-btn" 
          :class="{ active: currentMonth === 0 }"
          @click="switchMonth(0)"
        >
          {{ monthOptions[0] }}
        </view>
        <view 
          class="month-btn" 
          :class="{ active: currentMonth === 1 }"
          @click="switchMonth(1)"
        >
          {{ monthOptions[1] }}
        </view>
      </view>
      
      <!-- 温馨提示 -->
      <view class="tips-section">
        <view class="section-header">
          <view class="section-line"></view>
          <text class="section-title">温馨提示</text>
        </view>
        <view class="tips-content">
          <text class="tips-text">1、可查询上月和本月费用调整情况。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api.js'

const navBarHeight = ref(88)
const phoneNumber = ref('189*****0691')
const currentMonth = ref(0)

// 生成月份选项（当前月和上个月）
const monthOptions = computed(() => {
  const now = new Date()
  const currentYear = now.getFullYear()
  const currentMonth = now.getMonth() + 1
  
  // 当前月
  const thisMonth = `${currentYear}年${currentMonth}月`
  
  // 上个月
  const lastMonthDate = new Date(currentYear, currentMonth - 2, 1)
  const lastYear = lastMonthDate.getFullYear()
  const lastMonth = lastMonthDate.getMonth() + 1
  const lastMonthStr = `${lastYear}年${lastMonth}月`
  
  return [thisMonth, lastMonthStr]
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44

  // 初始化查询费用调整记录
  // queryCostAdjustment()
})

const queryCostAdjustment = (month) => {
  api.queryyadjust({
    phone: '18129382111',
    queryMonth: month
    // queryMonth: monthOptions.value[currentMonth.value].replace('年', '').replace('月', '').replace(/\//g, '')
  }).then(res => {
    console.log('查询费用调整记录:', JSON.stringify(res))
    if(res.code == 200){
      const data = res.data

      // 跳转到费用调整详单页面，传递选中的月份信息
      uni.navigateTo({
        url: `/pages/cost-adjustment-detail/cost-adjustment-detail?content=${encodeURIComponent(JSON.stringify(data))}`,
        success: () => {
          console.log('跳转到费用调整详单页面成功')
        },
        fail: (err) => {
          console.error('跳转失败:', err)
          uni.showToast({
            title: '跳转失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    
    }else{
      uni.showToast({
        title: res.msg || '暂无费用调整记录',
        icon: 'none'
      })
      return
    }
  
  }).catch(err => {
    console.error('查询费用调整记录失败:', err)
  })
}

const switchMonth = (index) => {
  currentMonth.value = index
  const selectedMonth = monthOptions.value[index]
  console.log('切换月份:', selectedMonth.split('年')[1].split('月')[0])


  queryCostAdjustment(selectedMonth.split('年')[1].split('月')[0])
  
  
}
</script>

<style scoped>
.cost-adjustment-record-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}
.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx 32rpx;
  padding-bottom: 40rpx;
}

/* 本机号码 */
.phone-info {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.phone-number {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 80rpx 0; */
  margin-bottom: 40rpx;
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* padding: 60rpx 40rpx; */
}

.empty-icon-wrapper {
  width: 280rpx;
height: 280rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: rgba(255, 255, 255, 0.05); */
  backdrop-filter: blur(10rpx);
  position: relative;
}

.empty-icon {
  width: 280rpx;
height: 280rpx;
  opacity: 0.5;
}

/* 月份选择按钮 */
.month-selector {
  display: flex;
  gap: 24rpx;
  margin-bottom: 40rpx;
  justify-content: center;
}

.month-btn {
  /* flex: 1; */
  padding: 16rpx 40rpx;
  border-radius: 80rpx;
  text-align: center;
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 38rpx;
  background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
  border: 2rpx solid rgba(78, 138, 254, 1);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.month-btn.active {
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  box-shadow: 0px 4rpx 12rpx rgba(78, 138, 254, 0.3);
}

/* 温馨提示 */
.tips-section {
  margin-top: 40rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.section-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 24rpx 32rpx;
  /* background: rgba(255, 255, 255, 1); */
  border-radius: 16rpx;
}

.tips-text {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}
</style>

